<template>
	<view style="padding: 32rpx 30rpx;">
		<view class="stitle">{{datalist.title}}</view>
		<view class="Couponcode">
			<view class="name">优惠券码</view>
			<view class="msg">向商户出示此二维码，扫码核销使用</view>
			<view class="code_img">
				<!-- <image :src="datalist." mode=""></image> -->
				<ikun-qrcode 
				    width="260"
				    height="260"
				    unit="rpx"
				    color="#000000"
				    :data="datalist.writeOffNo" 
				/>
			</view>
			<view class="code_nub">券码：{{datalist.writeOffNo}}</view>
		</view>
		<view class="merchants">
			<view class="title">适用商户</view>
			<view class="sh">{{datalist.shopName}}</view>
			<view class="add">{{datalist.shopAddress}}</view>
			<view class="add">楼层：{{datalist.floorName}}</view>
			<view class="add">门牌号：{{datalist.shopNumber}}</view>
		</view>
		<view class="merchants">
			<view class="title">订单信息</view>
			<view class="lbe">
				<view>领取时间：</view>
				<view>{{datalist.createTime  | formatDate }}</view>
			</view>
			<view class="lbe">
				<view>使用期限：</view>
				<view>{{datalist.effectStart}} ~  {{datalist.effectEnd}}</view>
			</view>
			<view class="lbe">
				<view>使用须知：</view>
				<view>使用前请具体咨询店铺工作人员</view>
			</view>
			<!-- <view class="add">{{datalist.shopAddress}}</view> -->
		</view>
	</view>
</template>

<script>
     import { userCouponinfo } from '@/core/api/index.js'
	 import  IkunQrcode from '@/components/ikun-qrcode/ikun-qrcode.vue'
     export default{
		 data(){
			 return{
				 datalist:{}
			 }
		 },
		 components:{
			 IkunQrcode
		 },
		 onLoad(r) {
		 	console.log(r)
			this.UserCouponInfo(r.id)
		 },
		 methods:{
			async UserCouponInfo(id){
				const data = await userCouponinfo(id)
				this.datalist = data.data
				this.code()
			 }
		 }
	 }
</script>

<style lang="scss">
	.stitle{
		height: 72rpx;
		line-height: 72rpx;
		background-color: #FEF0EA;
		font-size: 28rpx;
		font-weight: 600;
		padding-left: 25rpx;
	}
	.Couponcode{
		padding: 50rpx 0 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #FFF;
		.name{
			font-size: 36rpx;
			font-weight: 700;
		}
		.msg{
			font-size: 26rpx;
             margin: 14rpx 0;
		}
		.code_img{
			// width: 260rpx;
			// height: 260rpx;
			image{
				width: 100%;
				height: 100%;
			}
			margin: 10rpx 0 5rpx;
		}
		.code_nub{
			font-size: 24rpx;
			font-weight: 500;

		}
	}
	.merchants{
		margin: 10rpx 0;
		padding: 30rpx;
		background-color: #fff;
		.title{
			padding-left: 15rpx;
			font-size: 30rpx;
			position: relative;
			font-weight: bold;
		}
		.title::after{
		    content: " ";
			position: absolute;
			width: 6rpx;
		    left: 0%;
			top: 50%;
			transform: translate(-50%,-50%);
			height:30rpx;
			border-radius: 10px;
			background: var(--Color, #F26B2E);
		}
		.sh{
			font-size: 26rpx;
			color: #333;
			margin: 24rpx 0 10rpx;
		}
		.add{
			color:#666;
			font-size: 24rpx;
			margin-bottom: 10rpx;
		}
		.lbe{
			display: flex;
			font-size: 24rpx;
			justify-content: space-between;
			margin-top:20rpx;
			view:nth-child(1){
				color: #A2A2A2;
			}
		}
	}
</style>